<template>
  <!-- 会员列表 -->
  <div class="tenantList">
    <div class="table-page-search">
      <a-form>
        <a-form-item label="关键词">
          <a-input v-model.trim="queryParam.keyword" placeholder="输入会员/负责人/电话" allowClear />
        </a-form-item>
        <a-form-item label="服务专员">
          <a-select placeholder="请选择服务专员" v-model="queryParam.server" allowClear>
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="0">未分配</a-select-option>
            <a-select-option v-for="(item, index) in perList" :key="index" :value="item.id">{{
              item.userName
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="负责人标签">
          <a-select
            placeholder="请选择标签"
            v-model="queryParam.groupIds"
            allowClear
            :showArrow="true"
            mode="multiple"
            class="min-width-18"
          >
            <a-select-option v-for="(item, idx) in labelLists" :key="idx" :value="item.id" :label="item.name">
              <span role="img" :aria-label="item.name"></span>
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="入会时间">
          <a-range-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" v-model="joinTime" class="width-25" />
        </a-form-item>
        <a-form-item label="到期时间">
          <a-range-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" v-model="memberEndTime" class="width-25" />
        </a-form-item>
        <span class="search-submitButtons">
          <a-button type="primary" @click="handleSearch">查询</a-button>
          <a-button type="link" @click="handleReset">重置筛选条件</a-button>
        </span>
      </a-form>
    </div>
    <div class="table-operator disFlxJS">
      <div>
        <template v-if="member_state === memberStateEnum.NORMAL">
          <a-button v-has="'member:headquartersList:add'" type="primary" @click="handleShowAddForm"
            >新增{{ applyTypeText[applyType] }}</a-button
          >
          <a-button v-has="'member:headquartersList:import'" type="primary" @click="handleShowImportForm"
            >批量导入{{ applyTypeText[applyType] }}</a-button
          >
          <a-button
            v-has="'member:headquartersList:export'"
            type="primary"
            ghost
            :disabled="dwDisabled"
            @click="excelDown"
            >导出会员</a-button
          >
        </template>
      </div>
    </div>
    <div class="table-operator disFlxJS">
      <div class="disFlxAC">
        <span class="_pr-10 _pb-10 color9"
          >已勾选<span class="colorZS _pl-2 _pr-2 fw-7">{{ selectedRowKeys.length }}</span
          >位会员</span
        >
        <a-button v-if="total" type="primary" ghost @click="checkedAllMemberList"
          >{{ isAllChecked ? '取消勾选' : '勾选' }}"筛选条件"下全部<span class="fw-7 _pl-2 _pr-2">{{ total }}</span
          >位会员</a-button
        >
      </div>
      <div>
        <a-button type="primary" ghost @click="handleOpenMemberSetForm">
          批量改会员设置
        </a-button>
        <a-button type="primary" ghost @click="handleShowBatchAttacheForm">
          批量分配服务专员
        </a-button>
        <a-button v-has="'member:headquartersList:labelling'" type="primary" ghost @click="openBatchAddTag">
          批量打标签
        </a-button>
        <SendMessageSelect
          v-has="'member:headquartersList:send'"
          :dataSource="DataSourceEnum.MEMBERLIST"
          :pageSelectedObj="pageSelectedObj"
        />
      </div>
    </div>
    <div>
      <s-table
        ref="table"
        size="default"
        rowKey="id"
        :columns="newColumns"
        :data="loadData"
        :rangPicker="range"
        :rowSelection="
          isAllChecked
            ? { selectedRowKeys: selectedRowKeys, getCheckboxProps: getCheckboxProps }
            : { selectedRowKeys: selectedRowKeys, onChange: onSelectChange }
        "
      >
        <span slot="serial" slot-scope="text, record, index">
          {{ (pageNum - 1) * pageSize + index + 1 }}
        </span>
        <span slot="sortTitle">
          排序
          <a-popover title="会员排序说明" overlayClassName="poperlay-table">
            <template slot="content">
              <div class="_p-10" style="width: 550px">
                <a>会员排序方式由会员职务、会员排序序号、入会时间三项，一起联合判断进行排序。</a>
                <div class="_pt-5 _pb-5">
                  <span class="fw-6">规则1：</span>
                  <span>系统会优先根据会员职务排序进行排序，会员拥有的职务排序越靠前，会员排列越靠前；</span>
                </div>
                <div class="_pt-5 _pb-5">
                  <span class="fw-6">规则2：</span>
                  <span
                    >根据会员职务排序之后，同职务的会员将会根据会员排序序号进行排序，会员排序序号越大，会员排列越靠前；</span
                  >
                </div>
                <div class="_pt-5 _pb-5">
                  <span class="fw-6">规则3：</span>
                  <span
                    >根据会员排序序号排序之后，同职务同序号的会员，将会通过会员的入会时间进行排序，入会时间越早，会员排列越靠前</span
                  >
                </div>
              </div>
            </template>
            <a-icon type="question-circle" class="_ml-5 _mr-5" style="vertical-align: unset" />
          </a-popover>
        </span>
        <!-- 用户信息 -->
        <template slot="userInfo" slot-scope="text, record">
          <div class="disFlxAC">
            <a-avatar size="default" icon="user" :src="record.avatar" />
            <div class="_pl-10 fz-12">
              <div>
                <span>{{ record.leadingName }}</span>
              </div>
              <div>{{ record.leadingPhone }}</div>
            </div>
          </div>
        </template>

        <template slot="sort" slot-scope="text, record">
          <EditableCell
            :text="text.toString()"
            width="auto"
            :editStyle="{ marginTop: 0, right: '40px' }"
            @change="handleSortChange(record.id, $event)"
          />
        </template>

        <!-- 会员名称 -->
        <span slot="memberName" slot-scope="text, record">
          <a @click="tenantDetail(record)">{{ text }}</a>
        </span>
        <!-- 会员职务 -->
        <template slot="levelNameFilter" slot-scope="text, record, index">
          <FilterCheckbox
            v-model="queryParam.levelIds"
            :options="
              memberLevelOption.map(v => {
                return { value: v.id, label: v.name }
              })
            "
            @search="handleSearch"
          />
        </template>
        <!-- 缴费状态 -->
        <template slot="paymentStatusFilter" slot-scope="text, record, index">
          <FilterRadiobox
            v-model="queryParam.paymentStatus"
            :options="
              Dict.getLocal('paymentStatusDict').map(v => {
                return { value: v.dictValue, label: v.dictLabel }
              })
            "
            @search="handleSearch"
          />
        </template>
        <span slot="paymentStatus" slot-scope="text">
          <DictTag :options="Dict.getLocal('paymentStatusDict')" :value="text" />
        </span>

        <!-- 服务专员 -->
        <span slot="attacheName" slot-scope="text, record">
          <a v-if="text" @click="handleShowAttacheForm(record)">{{ text }}</a>
          <a-tag v-else color="green" class="cup" @click="handleShowAttacheForm(record)">立即分配</a-tag>
        </span>

        <!-- 标签 -->
        <template slot="tagUserList" slot-scope="text, record">
          <TableTagList :tagList="record.tagUserList" closable @close="tag => removeTag(record, tag)" />
        </template>

        <!-- 小程序登录 -->
        <template slot="isLoginFilter" slot-scope="text, record, index">
          <FilterCheckbox
            v-model="queryParam.isLogin"
            :options="
              Dict.getLocal('isLoginDict').map(v => {
                return { value: v.dictValue, label: v.dictLabel }
              })
            "
            @search="handleSearch"
          />
        </template>
        <span slot="isLogin" slot-scope="text">
          <DictTag :options="Dict.getLocal('isLoginDict')" :value="text" isText />
        </span>

        <!-- 公众号关注状态 -->
        <template slot="isOfficialAccountFilter" slot-scope="text, record, index">
          <FilterCheckbox
            v-model="queryParam.isOfficialAccount"
            :options="
              Dict.getLocal('isOfficialAccountDict').map(v => {
                return { value: v.dictValue, label: v.dictLabel }
              })
            "
            @search="handleSearch"
          />
        </template>
        <template slot="dataIntegrityFilter" slot-scope="text, record, index">
          <div style="background-color: white;padding: 10px;">
            <a-input-number v-model="queryParam.beginDataIntegrity" :max="100" :min="0" /> % -
            <a-input-number v-model="queryParam.endDataIntegrity" :max="100" :min="0" /> %
            <div style="display: flex;justify-content: end;margin-top: 10px;">
              <a-button type="primary" size="small" @click="$refs.table.refresh(true)">搜索</a-button>
              <a-button size="small" class="_ml-8" @click="handleReset">重置</a-button>
            </div>
          </div>
        </template>
        <span slot="isOfficialAccount" slot-scope="text">
          <DictTag :options="Dict.getLocal('isOfficialAccountDict')" :value="text" isText />
        </span>

        <!-- 资料完成度 -->
        <span slot="dataIntegrity" slot-scope="text"> {{ text || 0 }}% </span>

        <!-- 操作 -->
        <div slot="actionFilterIcon" class="disFlxAC min-width-12">
          <CustomTable :name="$route.name + '_' + applyType" :columns="columns" :newColumns="newColumns" />
        </div>
        <template slot="actionFilter">
          <div></div>
        </template>
        <span slot="action" slot-scope="text, record">
          <ButtonGroup :max-length="2" :key="`${record.id}-${record.memberState}`">
            <a-button
              v-for="item in _btnList(record)"
              :key="item.text"
              :type="item.type"
              :ghost="item.ghost"
              size="small"
              class="width-8"
              @click="item.fn"
            >
              {{ item.text }}
            </a-button>
          </ButtonGroup>
        </span>
      </s-table>
    </div>
    <ReviewStatusModule ref="reviewStatus" @ok="handleReload" />
    <!-- <person-form ref="personForm" @add="$refs.table.refresh()" /> -->
    <!-- 分配服务专员弹窗 -->
    <EditAttacheForm ref="attacheForm" :attacheList="perList" @success="handleReload" />
    <AddMemberForm
      ref="memberForm"
      :memberLevelOption="memberLevelOption"
      :applyType="applyType"
      @success="handleReload"
    />
    <RefundForm ref="refundForm" :disabled="member_state === memberStateEnum.RETURN" @success="handleReload" />

    <MemberImportForm
      ref="importForm"
      :applyType="applyType"
      :title="'导入' + Dict.getDictItem(Dict.getLocal('applyTypeDict'), applyType).dictLabel"
      @success="handleReload"
    />

    <!-- 续费设置弹窗 -->
    <PaySetModal ref="paySetModal" />

    <!-- 打标签 -->
    <Labelling ref="Labelling" @refresh="handleReload" />

    <!-- 导出 -->
    <TaskNotification ref="TaskNotification" />

    <!-- 会员设置 -->
    <MemberSetForm ref="memberSetForm" @refresh="handleReload" />
    <BatchMemberSetForm ref="batchMemberSetForm" @refresh="handleReload" />
  </div>
</template>
<script>
import { STable } from '@/components'
import EditableCell from '@/components/EditableCell'
import CustomTable from '@/components/Cuscolumn'

import ReviewStatusModule from './modules/reviewStatus'
import personForm from './modules/personForm'
import EditAttacheForm from './modules/editAttacheForm'
import AddMemberForm from './modules/addMemberForm'
import RefundForm from './modules/refundForm'
import MemberImportForm from './modules/memberImportForm'

import PaySetModal from '../components/modal/paySet.vue'
import MemberSetForm from '../components/memberSetForm.vue'
import BatchMemberSetForm from '../components/batchMemberSetForm.vue'
import { memberStateEnum } from '@/enums/member'
import { checkPermission } from '@/utils/authority'
import TaskNotification from '@/components/tools/TaskNotification'

import {
  memberRecover,
  sendComplete,
  headquartersPageList,
  memberLevelGetDownList,
  getUserList,
  MemberInfoSearchVoList
} from '@/api/system/system'
import {
  updateMemberSort,
  checkedAllMember,
  syncMemberIdcustomExportExcel,
  MemberSettingInfo
} from '@/api/member/member'
import { getTagUserList } from '@/api/member/grouping'
import SendMessageSelect from '@/views/operations/message/components/sendMessageSelect'
import { DataSourceEnum } from '@/enums/member'
import { batchAssignTag, getBatchUserTag } from '@/api/member/grouping'
import Labelling from '@/views/member/grouping/components/labelling'
import TableTagList from '@/views/member/grouping/components/tableTagList'
import { debounce } from '@/utils/common'
import DictTag from '@/components/DictTag'
import { cloneDeep } from 'lodash-es'
import FilterCheckbox from '@/components/Table/filterCheckbox'
import FilterRadiobox from '@/components/Table/filterRadiobox'
import ButtonGroup from '@/components/Table/buttonGroup'
import { attacheList } from '@/api/system/system'

export default {
  props: ['member_state', 'applyType', 'columns'],
  components: {
    STable,
    ReviewStatusModule,
    personForm,
    EditAttacheForm,
    AddMemberForm,
    RefundForm,
    MemberImportForm,
    EditableCell,
    CustomTable,
    PaySetModal,
    SendMessageSelect,
    Labelling,
    TableTagList,
    TaskNotification,
    DictTag,
    MemberSetForm,
    FilterCheckbox,
    FilterRadiobox,
    ButtonGroup,
    BatchMemberSetForm
  },
  data() {
    return {
      DataSourceEnum,
      memberStateEnum,
      range: null,
      selectedRowKeys: [],
      memberLevelOption: [],
      labelLists: [],
      perList: [],
      queryParam: {
        beginDataIntegrity: undefined,
        endDataIntegrity: undefined,
        keyword: '',
        groupIds: undefined,
        beginTime: undefined,
        endTime: undefined,
        beginMemberTime: undefined,
        endMemberTime: undefined,
        levelIds: undefined,
        paymentStatus: undefined,
        server: '',
        isLogin: undefined,
        isOfficialAccount: undefined
      },
      pageNum: 1,
      pageSize: 10,
      total: 0,
      isAllChecked: false,
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        var params = {
          current: parameter.pageNum,
          size: parameter.pageSize
        }
        this.pagination.current = parameter.pageNum
        return headquartersPageList(
          Object.assign(params, this.queryParam, { memberState: this.member_state, applyType: this.applyType })
        )
          .then(res => {
            this.pageNum = parameter.pageNum
            this.pageSize = parameter.pageSize
            this.total = res.data.total
            return res
          })
          .catch(err => {
            this.$message.error(err.msg)
          })
      },
      pageSelectedObj: {},
      pagination: {
        current: 1,
        pageSize: 10
      },
      applyTypeText: {
        1: '单位会员',
        2: '个人会员'
      },
      appUserInfoIdList: [] // 打标签所需ID数组,非会员ID,且无唯一性
    }
  },
  created() {
    this.getSelectList()
    this.handelMemberLevelGetDownList()
  },
  computed: {
    memberEndTime: {
      get() {
        return [this.queryParam.beginMemberTime, this.queryParam.endMemberTime]
      },
      set(val) {
        this.queryParam.beginMemberTime = val[0]
        this.queryParam.endMemberTime = val[1]
      }
    },
    joinTime: {
      get() {
        return [this.queryParam.beginTime, this.queryParam.endTime]
      },
      set(val) {
        this.queryParam.beginTime = val[0]
        this.queryParam.endTime = val[1]
      }
    },
    // 由于此处columns,是父组件传入,无法像其它页面取到初始数据
    oldColumns() {
      return cloneDeep(this.columns)
    },
    newColumns() {
      const currentColumns = this.$store.state.user.customTable
      if (currentColumns && currentColumns[this.$route.name + '_' + this.applyType]) {
        return this.oldColumns
          .filter(v => {
            const _items = currentColumns[this.$route.name + '_' + this.applyType].find(
              item => item === v.title || item.title === v.title
            )
            if (_items) return Object.assign(v, _items)
          })
          .sort((a, b) => {
            return a.tableSort - b.tableSort
          })
      } else {
        return this.columns
      }
    },
    // 按钮是否禁用-判断当前页面是否存在未完成任务
    dwDisabled() {
      const _currentDW = this.$store.state.app.taskQueuesList.find(v => v.fullPath === this.$route.fullPath)
      return !!_currentDW
    }
  },

  methods: {
    // 续费
    goPayment(row) {
      let { id } = row
      this.$refs.paySetModal.show({
        id,
        type: 'renewSet'
      })
    },
    // 跳转租户详情
    tenantDetail(info, type) {
      this.$router.push({
        path: '/member/headquartersInfo',
        query: {
          id: info.id,
          type
        }
      })
    },
    // 退会
    quit(row) {
      this.$refs.refundForm.show(row)
    },
    // 恢复
    recover(id) {
      this.$confirm({
        title: `确定恢复会员吗？`,
        onOk: () => {
          return memberRecover({ id: id }).then(res => {
            if (res.code === 0) {
              this.$message.success('恢复成功!')
              this.handleSearch()
            } else {
              this.$message.error(res.msg)
            }
          })
        },
        onCancel() {}
      })
    },
    getSelectList() {
      getTagUserList({ type: 0 }).then(res => {
        this.labelLists = res.data
      })
      // getUserList().then((res) => {
      //   this.perList = res.rows
      // })
      attacheList({ attacheType: 'hyzy' }).then(res => {
        this.perList = res.data
      })
    },
    handleReset() {
      Object.keys(this.queryParam).forEach(k => {
        this.queryParam[k] = undefined
      })
      this.handleSearch()
    },

    // 会员级别下拉
    handelMemberLevelGetDownList() {
      return memberLevelGetDownList().then(res => {
        if (res.code === 0) {
          this.memberLevelOption = res.data
        }
      })
    },
    // 导出
    async excelDown() {
      debounce(() => {
        syncMemberIdcustomExportExcel({
          ...this.queryParam,
          memberState: this.member_state,
          applyType: this.applyType,
          fromid: this.applyType,
          fullPath: this.$route.fullPath
        }).then(res => {
          const { data } = res
          this.$refs.TaskNotification.toggleTask(data)
        })
      })
    },
    handleReload() {
      this.$refs.table.refresh()
    },
    // 通知完善资料
    sendComplete(info) {
      this.$confirm({
        title: `是否通知该会员完善资料？`,
        onOk: () => {
          return sendComplete({ id: info }).then(res => {
            if (res.code === 0) {
              this.$message.success('通知成功!')
              this.handleSearch()
            } else {
              this.$message.error(res.msg)
            }
          })
        },
        onCancel() {}
      })
    },
    // 表格数据选中事件
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys

      this.pageSelectedObj[this.pagination.current] = selectedRows.map(item => {
        return {
          userId: 'LEADING_' + item.leadingId,
          companyName: item.companyName,
          userName: item.leadingName,
          phone: item.leadingPhone,
          companyPosition: item.leadingSocialPosition,
          memberLevelName: item.levelName,
          isOfficialAccount: item.isOfficialAccount,
          // 打标签使用,由于会员table,标签用的ID非唯一KEY,无法全选回显勾选,
          // 所以使用pageSelectedObj对象获取
          appUserInfoId: item.appUserInfoId,
          applyType: item.applyType
        }
      })
    },
    // 当前筛选条件,全部勾选
    async checkedAllMemberList() {
      this.isAllChecked = !this.isAllChecked
      if (this.isAllChecked) {
        const { data } = await checkedAllMember({
          ...this.queryParam,
          memberState: this.member_state,
          applyType: this.applyType
        })
        this.selectedRowKeys = data.ids
        // 查询用户列表接口,未返回打标签所需ID, 而table也非appUserInfoId为唯一key
        // 所以全选则用新数组 appUserInfoIdList 接收
        this.appUserInfoIdList = data.appUserInfoIds

        MemberInfoSearchVoList({
          dataSource: this.DataSourceEnum.MEMBERLIST,
          userIds: data.smsUserIds,
          current: 1,
          size: data.smsUserIds.length
        }).then(res => {
          this.pageSelectedObj = { 1: res.data.records }
        })
      } else {
        this.clearSelected()
      }
    },
    clearSelected() {
      this.selectedRowKeys = []
      this.appUserInfoIdList = []
      this.pageSelectedObj = {}
      this.isAllChecked = false
    },
    handleSearch() {
      this.$refs.table.refresh(true)
      // this.clearSelected()
    },
    getCheckboxProps() {
      return {
        props: {
          disabled: true
        }
      }
    },

    getCheckCheckedMember() {
      if (!this.isAllChecked) {
        const selectMemberList = Object.keys(this.pageSelectedObj).reduce((pre, cur) => {
          pre = pre.concat(this.pageSelectedObj[cur])
          return pre
        }, [])
        this.appUserInfoIdList = []
        selectMemberList.forEach(v => {
          if (v.appUserInfoId) {
            this.appUserInfoIdList.push(v.appUserInfoId)
          }
        })
      }
      if (!this.selectedRowKeys.length) {
        this.$message.warning('请勾选要操作的数据')
        throw new Error('请勾选要操作的数据')
      }
    },

    // 批量打标签弹窗打开
    async openBatchAddTag() {
      this.getCheckCheckedMember()
      const { data } = await getBatchUserTag(this.appUserInfoIdList)
      this.$refs.Labelling.show(this.appUserInfoIdList, data)
    },

    // 删除单个标签
    removeTag(row, tag) {
      let params = {
        appUserInfoIdList: [row.appUserInfoId],
        cancelTagIdList: [tag.id]
      }
      batchAssignTag(params).then(() => {
        this.handleReload()
      })
    },

    //打开分配、编辑专员弹窗
    handleShowAttacheForm(row) {
      this.$refs.attacheForm.show({ ...row })
    },
    handleShowBatchAttacheForm() {
      this.getCheckCheckedMember()
      this.$refs.attacheForm.show({ memberIds: this.selectedRowKeys })
    },

    //打开新增会员弹窗
    handleShowAddForm() {
      this.$refs.memberForm.show()
    },

    //打开导入弹窗
    handleShowImportForm() {
      this.$refs.importForm.show()
    },
    //更改排序
    async handleSortChange(memberId, sort) {
      let { code, msg } = await updateMemberSort({ memberId, sort })
      this.$message[code === 0 ? 'success' : 'error'](msg)
      this.$refs.table.refresh(true)
    },

    //会员设置
    async handleMemberSet(record) {
      let res = await MemberSettingInfo(record.id)
      let data = res.data || {}
      this.$refs.memberSetForm.show(data)
    },
    handleOpenMemberSetForm() {
      this.getCheckCheckedMember()
      this.$refs.batchMemberSetForm.show({ memberIds: this.selectedRowKeys })
    },

    _btnList(record) {
      let oldList = [
        {
          show: checkPermission('member:headquartersInfo'),
          text: '详情',
          fn: () => this.tenantDetail(record)
        },
        {
          show: true,
          text: '会员设置',
          type: 'primary',
          ghost: true,
          fn: () => this.handleMemberSet(record)
        },
        // {
        //   show:
        //     !record.attacheUserId && record.memberState !== 0 && checkPermission('member:headquartersList:editAttache'),
        //   text: '分配',
        //   fn: () => this.handleShowAttacheForm(record),
        // },
        {
          show: record.memberState !== 0 && checkPermission('member:headquartersList:renew'),
          text: '续费设置',
          type: 'primary',
          ghost: true,
          fn: () => this.goPayment(record)
        },
        // {
        //   show:
        //     record.attacheUserId && record.memberState !== 0 && checkPermission('member:headquartersList:editAttache'),
        //   text: '编辑专员',
        //   fn: () => this.handleShowAttacheForm(record),
        // },
        {
          show: record.memberState !== 0 && record.id != 1 && checkPermission('member:headquartersList:withdrawal'),
          text: '退会',
          type: 'danger',
          ghost: true,
          fn: () => this.quit(record)
        },
        // {
        //   show: record.memberState !== 0 && checkPermission('member:headquartersList:send'),
        //   text: '通知完善资料',
        //   fn: () => this.sendComplete(record.id),
        // },
        {
          show: record.memberState === 0 && checkPermission('member:headquartersList:recover'),
          text: '恢复',
          type: 'primary',
          ghost: true,
          fn: () => this.recover(record.id)
        },
        {
          show: checkPermission('member:headquartersList:accessory'),
          text: '附件管理',
          type: 'primary',
          ghost: true,
          fn: () => this.tenantDetail(record, 'annex')
        },
        {
          show: checkPermission('member:headquartersList:labelling'),
          text: '打标签',
          type: 'primary',
          ghost: true,
          fn: () => {
            const tagIds = record.tagUserList ? record.tagUserList.map(v => v.id) : []
            this.$refs.Labelling.show([record.appUserInfoId], tagIds)
          }
        }
      ]
      return oldList.filter(v => v.show)
    }
  }
}
</script>
<style lang="less" scoped>
.more {
  width: 150px;
  height: 100px;
  background: #fff;
  text-align: center;
  z-index: 999;
  position: fixed;
  right: 0;
  top: 40%;
}

.addPerson {
  color: orange;
}

.activation {
  color: #1890ff;
}
</style>
